<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 3.添加组件标签 注意有两种写法-->
      <todo-header :addTodo="addTodo"/>
      <todo-list  :todos="todos" :deleteTodo="deleteTodo"/>
      <!-- 1.TodoFooter组件标签给App.vue传三个参数，
      即TodoFooter里的props的声明属性
      2.第二个和第三个是函数，所以要在App.vue里写，因为数据在哪就在哪写更新数据的行为属性
       -->
      <todo-footer :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAllTodos="selectAllTodos"/>
    </div>
  </div>
</template>

<script>
//1.引入子组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  data(){
      return{
        /* todos:[
          {title:'吃饭',complete:false},
          {title:'睡觉',complete:true},
          {title:'敲代码',complete:false},
        ] */
        //从localStorage读取todos
        todos:JSON.parse(window.localStorage.getItem('todos_key') || '[]')
      }
  },

  methods:{
    // 在当前todos的前面插入todo，
    addTodo(todo){
      this.todos.unshift(todo);
    },
    //删除Todo的函数
    deleteTodo(index){
      this.todos.splice(index,1);//因为todos是数组，要删除todo就是根据todos的下标来删除，后面的参数是删除的个数
    },
    // 删除所有选中的todo，过滤
    deleteCompleteTodos(){
      // 过滤留下为false，this.todos.filter(todo => !todo.complete);
      //更新
      this.todos = this.todos.filter(todo => !todo.complete);
    },
    /*  1.全选或全不选，
        2.函数要不要传参？
        3.要传参，传形参还是实参，名字叫啥？
    */
    selectAllTodos(check){
      // 表示todos遍历todo的complete=check，check表示是否选中
      this.todos.forEach(todo =>todo.complete = check);

    }
    
  },

  watch:{//监视
    todos:{
      deep:true,//深度监视
      handler:function(value){
        //将todos最新的值的json，保存到localStorage
        /* // setItem()两个参数，第一个参数要跟getItem对应，
        取的是字符串，设置的也是字符串，但是需要数组，所以用json去解析 */
        window.localStorage.setItem('todos_key',JSON.stringify(value));
      }
    }

  },

  // 2.映射组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
};
</script>

<style>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>